<template>
  <div>
    <h3>child</h3>
    {{ msg }} - {{ num }} - {{ arr }} - {{ flag }}
  </div>
</template>
<script>
export default {
  // 在子组件定义的地方，添加props选项,props选项有三种写法
  // 1.props的值为数组，数组的元素为自定义的属性名
  // 2.props的值为对象，对象的key值为自定义的属性名，value值为数据类型
  // 3.props的值为对象，对象的key值为自定义的属性名，value值为一个新的对象
      // 新对象的key值可以有 type，表示数据类型
      // 新对象的key值可以有 default,表示默认数据（如果默认是为对象或者数组，default为函数，返回对象或数组）
      // 新对象的key值可以有 required ，表示这个属性是必须传递的
      // 新对象的key值可以有 validator ，自定义验证函数会将该 prop 的值作为唯一的参数代入
  
  // 在子组件的模版中可以使用自定义的属性名显示数据
  // props: [
  //   'msg',
  //   'num',
  //   'flag',
  //   'to',
  //   'arr',
  //   'test',
  //   'un'
  // ]
  props: {
    msg: String,
    // num: Number,
    num:{
      type: Number,
      validator (val) {
        return val > 200
      }
    },
    flag: {
      type: Boolean,
      required: true
    },
    arr: {
      type: Array,
      default () {
        return ['a', 'b', 'c']
      }
    }
  }
}
</script>